<template>
	<div class="equipmentAdmin" v-loading="loading">
		<div class="title">设备管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline label-width="85px">
        <el-form-item label="设备站点">
          <el-select v-model="searchForm.waterstation" placeholder="请选择水站名称">
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
        </el-form-item>
				<!-- <el-form-item label="开始时间">
          <el-date-picker
            v-model="searchForm.starttime"
            placeholder="选择开始时间"
            :clearable="false"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="searchForm.lasttime"
            placeholder="选择结束时间"
            :clearable="false"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item style="margin-left: 15px;">
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
		<div class="equipmentStatus">
			<i class="el-icon-warning" :class="[curDeviceStatus === 1 ? 'normal' : 'TableWarnRed']"></i>
			当前设备状态：
      <span v-show="curDeviceStatus === 4" class="TableWarnRed">无水</span>
      <span v-show="curDeviceStatus === 3" class="TableWarnRed">离线</span>
      <span v-show="curDeviceStatus === 2" class="TableWarnRed">维护</span>
      <span v-show="curDeviceStatus === 1" class="normal">正常</span>
      <span v-show="curDeviceStatus === 0" class="TableWarnRed">异常</span>
      <span v-show="curDeviceStatus === 8" class="TableWarnRed">停运</span>
      <span v-show="curDeviceStatus === null"> - </span>
		</div>
    <div class="tableBox">
      <el-table :data="tableData" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#666'}"
      > 
        <el-table-column
          prop="gmtOperate"
          label="操作时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="operateId"
          label="操作编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="person"
          label="操作人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="操作状态"
          align="center">
          <template slot-scope="{ row }">
            {{ row.type === 0 ? "正常运行 -> 停止运行" : "停止运行 -> 正常运行"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="完成度"
          align="center">
          <template slot-scope="{ row }">
            <span v-show="row.status === 1">已完成</span>
            <span class="TableWarnRed" v-show="row.status === 0">未完成</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="原因"
          align="center">
        </el-table-column>
      </el-table>
    </div>

	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
// import myPaging from '@/components/myPaging.vue'
// import common from '@/plugins/common'
import posts from '@/plugins/request'
export default {
  name: 'equipmentAdmin',
  data () {
    return {
			msg: 'hello equipmentAdmin!',
			loading: false,
      searchForm: {
        waterstation: '',
        starttime: '',
        lasttime: '',
      },
      curDeviceStatus: null,
      
			tableData: [],
		}
  },
	methods: {
    ...mapActions([
      "getStationData"
    ]),
    async onSubmit() {
      this.loading = true
      if(!this.monitorListData.length) {
        await this.getStationData()
      }
      this.curDeviceStatus = this.findCurStationDevice(this.searchForm.waterstation)
      this.tableData = await posts.getEquipmentList(this.searchForm)
      this.loading = false
    },
    findCurStationDevice(station) {
      /**
       * 懋昌东  ==>  懋昌东
         松福桥西  ==>       松福桥西
         沙江4#  ==>       沙江4#
         沙江5#  ==>       沙江5#
         沙井一期进水口  ==>       沙井一期
         沙井二期进水口  ==>       沙井二期
         福永水质净化厂前池  ==>       福永净化厂
         固成水质净化厂  ==>       固戍净化厂
         中途泵站  ==>       中途泵站
       */
      let nameMatch = {
        "懋昌东": "懋昌东",
        "松福桥西": "松福桥西",
        "沙江4#": "沙江4#",
        "沙江5#": "沙江5#",
        "沙井一期进水口": "沙井一期",
        "沙井二期进水口": "沙井二期",
        "福永水质净化厂前池": "福永净化厂",
        "固戍水质净化厂": "固戍净化厂",
        "中途泵站": "中途泵站",
      }
      return this.monitorListData.find(v => v.station === nameMatch[station]).systemStatus
    }
  },
  created() {
		this.searchForm.waterstation = this.stationList[0]
		// this.searchForm.starttime = common.changeDateToString(new Date(new Date().getTime() - 518400000)) //一周
    // // 2592000000 一个月
    // this.searchForm.lasttime = common.changeDateToString(new Date()) 
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      monitorListData: 'getMonitorListData',
			stationList: 'getStationList',
			
    })
  },
}
</script>
<style scoped>
.equipmentAdmin {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.equipmentAdmin .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.equipmentAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.equipmentStatus {
	height: 50px;
	line-height: 50px;
  margin-bottom: 15px;
	padding-left: 15px;
	font-size: 14px;
	vertical-align: middle;
}
.equipmentStatus i {
	font-size: 18px;
	vertical-align: text-top;
}
.normal {
  color: #67C23A;
}
</style>


